<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_鼠标事件</title>
    <style type="text/css">
        #box {
            width: 300px;
            height: 300px;
            border: 10px solid green;
            background-color: red;
            /*边框圆角半径*/
            border-radius: 160px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">我很圆</div>
<script>
    var circle = document.getElementById("box");
    //鼠标按下
    circle.onmousedown = function () {
        circle.style.backgroundColor = 'yellow'

    };
    //把鼠标抬起来
    circle.onmouseup = function () {
        circle.style.backgroundColor = 'red'
    };
    //鼠标滑过=>从外部滑动到内部
    circle.onmouseover = function () {
        circle.style.backgroundColor = 'green';
        circle.style.backgroundColor = 'blue';
    };
    //鼠标从内部滑动到外部
    circle.onmouseout = function () {
        circle.style.backgroundColor = 'blue';
        circle.style.backgroundColor = 'green;'
    };
    /*
    innerHTML和innerText都可以向HTML标签中添加文本
    区别:
    innerHTML中可以添加HTML代码,例如p标签会被渲染出来
    innerText只能添加文本信息,标签也会做普通的文本信息显示出来
     */
    circle.onmousemove = function () {
        circle.innerHTML = '<p>啊</p>';
        //circle.innerText='<p>啊</p>';
        console.log("move");
    }
</script>
</body>
</html>